<template>
	<div>
		<el-card class="box-card">
			<div
				slot="header"
				class="clearfix"
			>
				<span>{{title}}</span>
			</div>
			<div
				id="SDTChart"
				:style="{width: '600px', height: '300px'}"
			></div>
		</el-card>
	</div>
</template>
<script>
	export default {
		name: "ComponentE",
		data() {
			return {
				title: "当前显示： 散点图组件",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.initChart();
			});
		},
		methods: {
			initChart() {
				this.chart = this.$echarts.init(
					document.getElementById("SDTChart"),
					"macarons"
				);
				let option = {
					dataset: {
						source: [
							[161.2, 51.6, 174, 65.6],
							[167.5, 59, 175.3, 71.8],
							[159.5, 49.2, 193.5, 80.7],
							[157, 63, 186.5, 72.6],
							[155.8, 53.6, 187.2, 78.8],
							[170, 59, 181.5, 74.8],
							[159.1, 47.6, 184, 86.4],
							[166, 69.8, 184.5, 78.4],
							[176.2, 66.8, 175, 62],
							[160.2, 75.2, 184, 81.6],
							[172.5, 55.2, 180, 76.6],
							[170.9, 54.2, 177.8, 83.6],
							[172.9, 62.5, 192, 90],
							[153.4, 42, 176, 74.6],
							[160, 50, 174, 71],
							[147.2, 49.8, 184, 79.6],
							[168.2, 49.2, 192.7, 93.8],
							[175, 73.2, 171.5, 70],
							[157, 47.8, 173, 72.4],
							[167.6, 68.8, 176, 85.9],
							[159.5, 50.6, 176, 78.8],
							[175, 82.5, 180.5, 77.8],
							[166.8, 57.2, 172.7, 66.2],
							[176.5, 87.8, 176, 86.4],
							[170.2, 72.8, 173.5, 81.8],
							[174, 54.5, 178, 89.6],
							[173, 59.8, 180.3, 82.8],
							[179.9, 67.3, 180.3, 76.4],
							[170.5, 67.8, 164.5, 63.2],
							[160, 47, 173, 60.9],
							[154.4, 46.2, 183.5, 74.8],
							[162, 55, 175.5, 70],
							[176.5, 83, 188, 72.4],
							[160, 54.4, 189.2, 84.1],
							[152, 45.8, 172.8, 69.1],
							[162.1, 53.6, 170, 59.5],
							[170, 73.2, 182, 67.2],
							[160.2, 52.1, 170, 61.3],
							[161.3, 67.9, 177.8, 68.6],
							[166.4, 56.6, 184.2, 80.1],
							[168.9, 62.3, 186.7, 87.8],
							[163.8, 58.5, 171.4, 84.7],
							[167.6, 54.5, 172.7, 73.4],
							[160, 50.2, 175.3, 72.1],
							[161.3, 60.3, 180.3, 82.6],
							[167.6, 58.3, 182.9, 88.7],
							[165.1, 56.2, 188, 84.1],
							[160, 50.2, 177.2, 94.1],
							[170, 72.9, 172.1, 74.9],
							[157.5, 59.8, 167, 59.1],
							[167.6, 61, 169.5, 75.6],
							[160.7, 69.1, 174, 86.2],
							[163.2, 55.9, 172.7, 75.3],
							[152.4, 46.5, 182.2, 87.1],
							[157.5, 54.3, 164.1, 55.2],
							[168.3, 54.8, 163, 57],
							[180.3, 60.7, 171.5, 61.4],
							[165.5, 60, 184.2, 76.8],
							[165, 62, 174, 86.8],
							[164.5, 60.3, 174, 72.2],
							[156, 52.7, 177, 71.6],
							[160, 74.3, 186, 84.8],
							[163, 62, 167, 68.2],
							[165.7, 73.1, 171.8, 66.1],
							[161, 80, 182, 72],
							[162, 54.7, 167, 64.6],
							[166, 53.2, 177.8, 74.8],
							[174, 75.7, 164.5, 70],
							[172.7, 61.1, 192, 101.6],
							[167.6, 55.7, 175.5, 63.2],
							[151.1, 48.7, 171.2, 79.1],
							[164.5, 52.3, 181.6, 78.9],
							[163.5, 50, 167.4, 67.7],
							[152, 59.3, 181.1, 66],
							[169, 62.5, 177, 68.2],
							[164, 55.7, 174.5, 63.9],
							[161.2, 54.8, 177.5, 72],
							[155, 45.9, 170.5, 56.8],
							[170, 70.6, 182.4, 74.5],
							[176.2, 67.2, 197.1, 90.9],
							[170, 69.4, 180.1, 93],
							[162.5, 58.2, 175.5, 80.9],
							[170.3, 64.8, 180.6, 72.7],
							[164.1, 71.6, 184.4, 68],
							[169.5, 52.8, 175.5, 70.9],
							[163.2, 59.8, 180.6, 72.5],
							[154.5, 49, 177, 72.5],
							[159.8, 50, 177.1, 83.4],
							[173.2, 69.2, 181.6, 75.5],
							[170, 55.9, 176.5, 73],
							[161.4, 63.4, 175, 70.2],
							[169, 58.2, 174, 73.4],
							[166.2, 58.6, 165.1, 70.5],
							[159.4, 45.7, 177, 68.9],
							[162.5, 52.2, 192, 102.3],
							[159, 48.6, 176.5, 68.4],
							[162.8, 57.8, 169.4, 65.9],
							[159, 55.6, 182.1, 75.7],
							[179.8, 66.8, 179.8, 84.5],
							[162.9, 59.4, 175.3, 87.7],
							[161, 53.6, 184.9, 86.4],
							[151.1, 73.2, 177.3, 73.2],
							[168.2, 53.4, 167.4, 53.9],
							[168.9, 69, 178.1, 72],
							[173.2, 58.4, 168.9, 55.5],
							[171.8, 56.2, 157.2, 58.4],
							[178, 70.6, 180.3, 83.2],
							[164.3, 59.8, 170.2, 72.7],
							[163, 72, 177.8, 64.1],
							[168.5, 65.2, 172.7, 72.3],
							[166.8, 56.6, 165.1, 65],
							[172.7, 105.2, 186.7, 86.4],
							[163.5, 51.8, 165.1, 65],
							[169.4, 63.4, 174, 88.6],
							[167.8, 59, 175.3, 84.1],
							[159.5, 47.6, 185.4, 66.8],
							[167.6, 63, 177.8, 75.5],
							[161.2, 55.2, 180.3, 93.2],
							[160, 45, 180.3, 82.7],
							[163.2, 54, 177.8, 58],
							[162.2, 50.2, 177.8, 79.5],
							[161.3, 60.2, 177.8, 78.6],
							[149.5, 44.8, 177.8, 71.8],
							[157.5, 58.8, 177.8, 116.4],
							[163.2, 56.4, 163.8, 72.2],
							[172.7, 62, 188, 83.6],
							[155, 49.2, 198.1, 85.5],
							[156.5, 67.2, 175.3, 90.9],
							[164, 53.8, 166.4, 85.9],
							[160.9, 54.4, 190.5, 89.1],
							[162.8, 58, 166.4, 75],
							[167, 59.8, 177.8, 77.7],
							[160, 54.8, 179.7, 86.4],
							[160, 43.2, 172.7, 90.9],
							[168.9, 60.5, 190.5, 73.6],
							[158.2, 46.4, 185.4, 76.4],
							[156, 64.4, 168.9, 69.1],
							[160, 48.8, 167.6, 84.5],
							[167.1, 62.2, 175.3, 64.5],
							[158, 55.5, 170.2, 69.1],
							[167.6, 57.8, 190.5, 108.6],
							[156, 54.6, 177.8, 86.4],
							[162.1, 59.2, 190.5, 80.9],
							[173.4, 52.7, 177.8, 87.7],
							[159.8, 53.2, 184.2, 94.5],
							[170.5, 64.5, 176.5, 80.2],
							[159.2, 51.8, 177.8, 72],
							[157.5, 56, 180.3, 71.4],
							[161.3, 63.6, 171.4, 72.7],
							[162.6, 63.2, 172.7, 84.1],
							[160, 59.5, 172.7, 76.8],
							[168.9, 56.8, 177.8, 63.6],
							[165.1, 64.1, 177.8, 80.9],
							[162.6, 50, 182.9, 80.9],
							[165.1, 72.3, 170.2, 85.5],
							[166.4, 55, 167.6, 68.6],
							[160, 55.9, 175.3, 67.7],
							[152.4, 60.4, 165.1, 66.4],
							[170.2, 69.1, 185.4, 102.3],
							[162.6, 84.5, 181.6, 70.5],
							[170.2, 55.9, 172.7, 95.9],
							[158.8, 55.5, 190.5, 84.1],
							[172.7, 69.5, 179.1, 87.3],
							[167.6, 76.4, 175.3, 71.8],
							[162.6, 61.4, 170.2, 65.9],
							[167.6, 65.9, 193, 95.9],
							[156.2, 58.6, 171.4, 91.4],
							[175.2, 66.8, 177.8, 81.8],
							[172.1, 56.6, 177.8, 96.8],
							[162.6, 58.6, 167.6, 69.1],
							[160, 55.9, 167.6, 82.7],
							[165.1, 59.1, 180.3, 75.5],
							[182.9, 81.8, 182.9, 79.5],
							[166.4, 70.7, 176.5, 73.6],
							[165.1, 56.8, 186.7, 91.8],
							[177.8, 60, 188, 84.1],
							[165.1, 58.2, 188, 85.9],
							[175.3, 72.7, 177.8, 81.8],
							[154.9, 54.1, 174, 82.5],
							[158.8, 49.1, 177.8, 80.5],
							[172.7, 75.9, 171.4, 70],
							[168.9, 55, 185.4, 81.8],
							[161.3, 57.3, 185.4, 84.1],
							[167.6, 55, 188, 90.5],
							[165.1, 65.5, 188, 91.4],
							[175.3, 65.5, 182.9, 89.1],
							[157.5, 48.6, 176.5, 85],
							[163.8, 58.6, 175.3, 69.1],
							[167.6, 63.6, 175.3, 73.6],
							[165.1, 55.2, 188, 80.5],
							[165.1, 62.7, 188, 82.7],
							[168.9, 56.6, 175.3, 86.4],
							[162.6, 53.9, 170.5, 67.7],
							[164.5, 63.2, 179.1, 92.7],
							[176.5, 73.6, 177.8, 93.6],
							[168.9, 62, 175.3, 70.9],
							[175.3, 63.6, 182.9, 75],
							[159.4, 53.2, 170.8, 93.2],
							[160, 53.4, 188, 93.2],
							[170.2, 55, 180.3, 77.7],
							[162.6, 70.5, 177.8, 61.4],
							[167.6, 54.5, 185.4, 94.1],
							[162.6, 54.5, 168.9, 75],
							[160.7, 55.9, 185.4, 83.6],
							[160, 59, 180.3, 85.5],
							[157.5, 63.6, 174, 73.9],
							[162.6, 54.5, 167.6, 66.8],
							[152.4, 47.3, 182.9, 87.3],
							[170.2, 67.7, 160, 72.3],
							[165.1, 80.9, 180.3, 88.6],
							[172.7, 70.5, 167.6, 75.5],
							[165.1, 60.9, 186.7, 101.4],
							[170.2, 63.6, 175.3, 91.1],
							[170.2, 54.5, 175.3, 67.3],
							[170.2, 59.1, 175.9, 77.7],
							[161.3, 70.5, 175.3, 81.8],
							[167.6, 52.7, 179.1, 75.5],
							[167.6, 62.7, 181.6, 84.5],
							[165.1, 86.3, 177.8, 76.6],
							[162.6, 66.4, 182.9, 85],
							[152.4, 67.3, 177.8, 102.5],
							[168.9, 63, 184.2, 77.3],
							[170.2, 73.6, 179.1, 71.8],
							[175.2, 62.3, 176.5, 87.9],
							[175.2, 57.7, 188, 94.3],
							[160, 55.4, 174, 70.9],
							[165.1, 104.1, 167.6, 64.5],
							[174, 55.5, 170.2, 77.3],
							[170.2, 77.3, 167.6, 72.3],
							[160, 80.5, 188, 87.3],
							[167.6, 64.5, 174, 80],
							[167.6, 72.3, 176.5, 82.3],
							[167.6, 61.4, 180.3, 73.6],
							[154.9, 58.2, 167.6, 74.1],
							[162.6, 81.8, 188, 85.9],
							[175.3, 63.6, 180.3, 73.2],
							[171.4, 53.4, 167.6, 76.3],
							[157.5, 54.5, 183, 65.9],
							[165.1, 53.6, 183, 90.9],
							[160, 60, 179.1, 89.1],
							[174, 73.6, 170.2, 62.3],
							[162.6, 61.4, 177.8, 82.7],
							[174, 55.5, 179.1, 79.1],
							[162.6, 63.6, 190.5, 98.2],
							[161.3, 60.9, 177.8, 84.1],
							[156.2, 60, 180.3, 83.2],
							[149.9, 46.8, 180.3, 83.2],
							[169.5, 57.3, null],
							[160, 64.1, null],
							[175.3, 63.6, null],
							[169.5, 67.3, null],
							[160, 75.5, null],
							[172.7, 68.2, null],
							[162.6, 61.4, null],
							[157.5, 76.8, null],
							[176.5, 71.8, null],
							[164.4, 55.5, null],
							[160.7, 48.6, null],
							[174, 66.4, null],
							[163.8, 67.3, null],
						],
						dimensions: ["女性身高", "女性体重"],
					},
					title: {
						text: "",
						subtext: "",
					},
					grid: {
						left: "3%",
						right: "7%",
						bottom: "3%",
						containLabel: true,
					},
					tooltip: {
						// trigger: 'axis',
						showDelay: 0,
						formatter: function (params) {
							if (params.value.length > 1) {
								return (
									params.seriesName +
									" :<br/>" +
									params.value[0] +
									"cm " +
									params.value[1] +
									"kg "
								);
							} else {
								return (
									params.seriesName +
									" :<br/>" +
									params.name +
									" : " +
									params.value +
									"kg "
								);
							}
						},
						axisPointer: {
							show: true,
							type: "cross",
							lineStyle: {
								type: "dashed",
								width: 1,
							},
						},
					},
					toolbox: {
						feature: {
							dataZoom: {},
							brush: {
								type: ["rect", "polygon", "clear"],
							},
						},
					},
					brush: {},
					legend: {
						data: ["女性", "男性"],
						left: "center",
					},
					xAxis: [
						{
							type: "value",
							scale: true,
							axisLabel: {
								formatter: "{value} cm",
							},
							splitLine: {
								show: false,
							},
						},
					],
					yAxis: [
						{
							type: "value",
							scale: true,
							axisLabel: {
								formatter: "{value} kg",
							},
							splitLine: {
								show: false,
							},
						},
					],
					series: [
						{
							name: "女性",
							type: "scatter",
							encode: {
								x: 0,
								y: 1,
							},
							markArea: {
								silent: true,
								itemStyle: {
									normal: {
										color: "transparent",
										borderWidth: 1,
										borderType: "dashed",
									},
								},
								data: [
									[
										{
											name: "女性分布区间",
											xAxis: "min",
											yAxis: "min",
										},
										{
											xAxis: "max",
											yAxis: "max",
										},
									],
								],
							},
							markPoint: {
								data: [
									{ type: "max", name: "最大值" },
									{ type: "min", name: "最小值" },
								],
							},
							markLine: {
								lineStyle: {
									normal: {
										type: "solid",
									},
								},
								data: [{ type: "average", name: "平均值" }, { xAxis: 160 }],
							},
						},
						{
							name: "男性",
							type: "scatter",
							encode: {
								x: 2,
								y: 3,
							},
							markArea: {
								silent: true,
								itemStyle: {
									normal: {
										color: "transparent",
										borderWidth: 1,
										borderType: "dashed",
									},
								},
								data: [
									[
										{
											name: "男性分布区间",
											xAxis: "min",
											yAxis: "min",
										},
										{
											xAxis: "max",
											yAxis: "max",
										},
									],
								],
							},
							markPoint: {
								data: [
									{ type: "max", name: "最大值" },
									{ type: "min", name: "最小值" },
								],
							},
							markLine: {
								lineStyle: {
									normal: {
										type: "solid",
									},
								},
								data: [{ type: "average", name: "平均值" }, { xAxis: 170 }],
							},
						},
					],
				};
				this.chart.setOption(option);
			},
		},
	};
</script>
<style lang="css" scoped>
	div {
		color: #909399;
	}
	/deep/ .el-tag {
		font-size: 18px;
	}
	/deep/ .el-card {
		font-size: 14px;
	}
</style>